<template>
  <div class="pager-container" v-if="pageNumber > 1">
    <a @click="handleClick(1)" :class="{disable: current === 1}">|&lt;&lt;</a>
    <a @click="handleClick(current - 1)" :class="{disable: current === 1}">&lt;&lt;</a>
    <a v-for="(item, i) in numbers" :key="i" :class="{active: current === item}" @click="handleClick(item)">{{item}}</a>
    <a @click="handleClick(current + 1)" :class="{disable: current === pageNumber}">&gt;&gt;</a>
    <a @click="handleClick(pageNumber)" :class="{disable: current === pageNumber}">&gt;&gt;|</a>
  </div>
</template>

<script>
export default {
  props: {
    current: {
      type: Number,
      default: 1,
    },
    total: {
      type: Number,
      default: 0,
    },
    limit: {
      type: Number,
      default: 10,
    },
    visbleNumber: {
      type: Number,
      default: 10,
    }
  },
  computed: {
    // 总页数
    pageNumber() {
      return Math.ceil(this.total / this.limit);
    },
    visibleMin() {
      let min = this.current - Math.floor(this.visbleNumber / 2);
      if(min < 1) {
        min = 1;
      }
      return min;
    },
    visbleMax() {
      let max = this.visibleMin + this.visbleNumber - 1;
      if(max > this.pageNumber) {
        max = this.pageNumber;
      }
      return max;
    },
    numbers() {
      let nums = [];
      for(let i = this.visibleMin; i <= this.visbleMax; i++) {
        nums.push(i);
      }
      return nums;
    }
  },
  methods: {
    handleClick(newPage) {
      this.$emit("pagerChange", newPage);
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/styles/var.less";
  .pager-container{
    display: flex;
    justify-content: center;
    margin: 20px 0;
    a{
      color: @primary;
      margin: 0 6px;
      cursor: pointer;
      &.disable{
        color: @gray;
        cursor: not-allowed;
      }
      &.active{
        color: @words;
        font-weight: bold;
        cursor: text;
      }
    }
    
  }
</style>